[class*="o-"] {
  --transTime: 0.3s;
}

.o-pages-enter-from {
	transform: translateX(-100%);
}
.o-pages-leave-to {
	transform: translateX(0);
}
.o-pages-enter-active,
.o-pages-leave-active {
	transition: opacity var(--transTime);
}

.o-fade-enter-active,
.o-fade-leave-active {
	transition: opacity var(--transTime);
}

.o-fade-enter-from,
.o-fade-leave-to {
	opacity: 0;
}

.o-zoom-enter-active,
.o-zoom-leave-active {
	transition: transform var(--transTime), opacity (var(--transTime));
}

.o-zoom-enter-from,
.o-zoom-leave-to {
	opacity: 0;
	transform: scale(1.2);
}

.o-move-top-enter-active,
.o-move-top-leave-active,
.o-move-right-enter-active,
.o-move-right-leave-active,
.o-move-bottom-enter-active,
.o-move-bottom-leave-active,
.o-move-left-enter-active,
.o-move-left-leave-active {
	transition: transform var(--transTime), opacity (var(--transTime));
}

.o-move-top-enter-from,
.o-move-top-leave-to,
.o-move-right-enter-from,
.o-move-right-leave-to,
.o-move-bottom-enter-from,
.o-move-bottom-leave-to,
.o-move-left-enter-from,
.o-move-left-leave-to {
	opacity: 0;
}

.o-move-top-enter-from,
.o-move-top-leave-to {
	transform: translate3d(0, -100%, 0);
}

.o-move-right-enter-from,
.o-move-right-leave-to {
	transform: translate3d(100%, 0, 0);
}

.o-move-bottom-enter-from,
.o-move-bottom-leave-to {
	transform: translate3d(0, 100%, 0);
}

.o-move-left-enter-from,
.o-move-left-leave-to {
	transform: translate3d(-100%, 0, 0);
}


@keyframes oSpin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes oFade {
	50% {
		opacity: 0;
	}

}

@keyframes oZoom {
	50% {
		transform: scale(1.2);
	}
}